<div data-bind="modal: isShow" class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button data-bind="click: onHideExportModal" class="close"><i class="fa fa-close"></i></button>
                <h4 class="modal-title" data-bind="text: Kooboo.text.component.exportModal.title"></h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-md-3" data-bind="text: Kooboo.text.component.exportModal.exportType"></label>
                        <div class="col-md-9">
                            <label class="radio-inline"><input type="radio" name="exportType" data-bind="checked: exportType" value="complete">
                                <!-- ko text: Kooboo.text.component.exportModal.complete -->
                                <!-- /ko -->
                            </label>
                            <!-- <label class="radio-inline"><input type="radio" name="exportType" data-bind="checked: exportType" value="increasment">Increment</label> -->
                            <label class="radio-inline"><input type="radio" name="exportType" data-bind="checked: exportType" value="custom">
                            <!-- ko text: Kooboo.text.component.exportModal.custom -->
                            <!-- /ko -->
                            </label>
                        </div>
                    </div>
                    <!-- ko if: exportType() !== 'complete' -->
                    <div class="form-group">
                        <!-- ko if: exportType() == 'increasment' -->
                        increasment
                        <!-- /ko -->
                        <!-- ko if: exportType() == 'custom' -->
                        <label class="control-label col-md-3" data-bind="text: Kooboo.text.component.exportModal.exportContent"></label>
                        <div class="col-md-9">
                            <!-- ko foreach: exportContents -->
                            <a href="javascript:;" class="label label-sm kb-table-label-refer" data-bind="text: $data.displayName, css: { green: $data.selected, gray: !$data.selected() }, click: $parent.onContentSelected.bind(this, $data)"></a>
                            <!-- /ko -->
                        </div>
                        <!-- /ko -->
                    </div>
                    <!-- /ko -->
                </div>
            </div>
            <div class="modal-footer">
                <button data-bind="click: onExport, text: Kooboo.text.common.start" class="btn green"></button>
                <button data-bind="click: onHideExportModal, text: Kooboo.text.common.cancel" class="btn gray"></button>
            </div>
        </div>
    </div>
</div>